<template>
  <el-table-column v-if="item.show !== false" v-bind="$attrs">
    <!-- 头部 -->
    <template #header>
      <el-tooltip
        effect="dark"
        content="当前列必填"
        placement="top"
      >
        <span v-if="item.required" style="color: red">*</span>
      </el-tooltip>
      <el-tooltip
        effect="dark"
        content="当前列双击可编辑"
        placement="top"
      >
        <i v-if="item.edit" class="el-icon-edit-outline"></i>
      </el-tooltip>
      <span>
        {{ item.title }}
      </span>
    </template>
    <!-- 内容 -->
    <template v-if="item.slot" v-slot="{ row, column, $index }">
      <template v-if="item.function">
        <div v-html="item.function(row)"></div>
      </template>
      <template v-else>
        <slot
          :name="item.slot"
          :$index="$index"
          :row="row"
          :column="column"
        ></slot>
      </template>
    </template>
    <template v-if="item.children && item.children.length">
      <hu-table-column
        v-bind="e"
        v-for="e in item.children"
        :key="e.prop"
        :item="e"
        slot=""
      >
        <template v-if="e.slot" v-slot:[e.slot]="{ row, column, $index }">
          <slot
            :name="e.slot"
            :$index="$index"
            :row="row"
            :column="column"
          ></slot>
        </template>
      </hu-table-column>
    </template>
  </el-table-column>
</template>

<script>
export default {
  name: "huTableColumn",
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.el-icon-edit {
  color: #496dff;
  cursor: pointer;
  &:hover {
    color: #7590fd;
  }
}
</style>
